<template>

    <div>
        <!-- 顶部指示栏 开始-->
        <section class="shortcut">
            <!-- 先放版型 -->
            <div class="w">
                <div class="fl">
                    <ul>
                        <li>品优购欢迎您！</li>
                        <li v-if="!userName">
                            <router-link to="/login">请登录 </router-link>
                            <router-link to="/register" class="style_red">免费注册</router-link>
                        </li>
                        <li v-else>
                            <a> {{ userName }} </a>
                            <a class="style_red" @click="logout"> 退出登录</a>
                        </li>
                    </ul>
                </div>
                <div class="fr">
                    <ul>
                        <li>
                            <a href="javascript:;">我的订单 </a>
                        </li>
                        <li></li>
                        <li>
                            <a href="javascript:;" class="icon_down">我的品优购</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="javascript:;">品优购会员</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="javascript:;">企业采购</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="javascript:;" class="icon_down">关注品优购</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="javascript:;" class="icon_down">客服服务</a>
                        <li></li>
                        </li>
                        <li>
                            <a href="javascript:;" class="icon_down">网站导航</a>
                        </li>

                    </ul>
                </div>
            </div>

        </section>
        <!-- 顶部指示栏 结束 -->

        <!-- 头部模块 开始 -->
        <header class="header w">
            <div class="logo">
                <!-- 放一个h1标签，目的是为了提权，logo seo优化 -->
                <h1>
                    <router-link to="/main" title="品优购">品优购</router-link>
                </h1>
            </div>
            <div class="search">
                <input text="search" name="" id="" v-model="keyword">
                <!-- 编程式的路由导航 -->
                <button @click="toList">搜索</button>
            </div>
            <div class="hotwords">
                <a href="#" class="style_red">优惠购首发</a>
                <a href="#">亿元优惠</a>
                <a href="#">9.9元团购</a>
                <a href="#">美满99减30</a>
                <a href="#">办公用品</a>
                <a href="#">电脑</a>
                <a href="#">通信</a>
            </div>
            <div class="shopcar befor_icon">
                <a href="http://localhost:8080/#/shopcart">我的购物车</a>

                <i class="count"> 9</i>
            </div>
        </header>

    </div>
    <!-- 头部模块 结束 -->
</template>

<script>
export default {
    name: 'HeaderIndex',
    data() {
        return {
            keyword: '',
        }
    },
    methods: {
        toList() {

            // this.$router.push({
            //     name: 'listName',
            //     params: {
            //         keyword: this.keyword,
            //     },
            // })
            // 增加query
            const location = {
                name: 'listName',
                params: { keyword: this.keyword || undefined }
            }
            if (this.$route.query) { location.query = this.$route.query }
            this.$router.push(location)
        },
        // 存在问题删掉keyword 后分类地址出错

        // 退出登录，清空项目中的信息
        async logout() {
           await this.$store.dispatch('user/userLogout');
        //    回到首页
        this.$router.push('/home')
        }
    },
    mounted() {
        this.$bus.$on("clean", () => {
            this.keyword = '';

        })
    },
    computed: {
        // 从仓库中获得用户名
        
         userName() {
            return this.$store.state.user.userInfo.name
    }
}
}
</script>

<style>
</style>